<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .dress {
      margin-top: 30px;
    }

    .dress .header {
      height: 58px;
      line-height: 58px;
    }

    .dress .header .left-area {
      float: left;
    }

    .dress .header .right-area  {
      float: right;
      font-size: 14px;
    }

    .dress .header .right-area .item {
      margin-left: 15px;
    }

    .dress .header .right-area .item:hover,
    .dress .header .right-area .item.active {
      padding: 3px 0;
      border-bottom: 2px solid red;
      color: red;
    }

    /* 列表内容 */
    .dress .list {
      margin-right: -14px;
    }

    .dress .list .item {
      float: left;
      /* position: relative;
      top: 0; */

      /* box model */
      width: 234px;
      height: 300px;
      margin-right: 14px;
      margin-bottom: 14px;

      background-color: #f00;

      /* 动画 */
      transition: all 0.3s ease-in;
    }

    .dress .list .item.item1 {
      height: 614px;
    }

    .dress .list .item.item9, 
    .dress .list .item.item10 {
      height: 143px;
    }

    .dress .list .item:hover {
      box-shadow: 0 15px 30px rgba(0,255,0,1);
      /* top: -2px; */
      transform: translateY(-2px);
    }

    .dress .list .item a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  
  <div class="mi_wrapper dress">
    <div class="header clear_fix">
      <div class="left-area">
        <h3 class="title">智能穿戴</h3>
      </div>
      <div class="right-area">
        <a class="item active hot" href="#">热门</a>
        <a class="item info" href="#">穿戴</a>
      </div>
    </div>
    <div>
      <ul class="list clear_fix">
        <li class="item item1"><a href="#">1</a></li>
        <li class="item item2"><a href="#">2</a></li>
        <li class="item item3"><a href="#">3</a></li>
        <li class="item item4"><a href="#">4</a></li>
        <li class="item item5"><a href="#">5</a></li>
        <li class="item item6"><a href="#">6</a></li>
        <li class="item item7"><a href="#">7</a></li>
        <li class="item item8"><a href="#">8</a></li>
        <li class="item item9"><a href="#">9</a></li>
        <li class="item item10"><a href="#">10</a></li>
      </ul>
    </div>
  </div>

</body>
</html>